<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  #box{width:1000px;height:170px;margin:  170px auto;overflow: hidden;}
  div{width:1000px;height:170px;position: relative;}
  img{width: 125px;height: 170px;position: absolute;}
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var Box = document.getElementById('box');
      var Div0 = Box.getElementsByTagName('div')[0];
      var Div1 = Box.getElementsByTagName('div')[1];
      var Img0 = Div0.getElementsByTagName('img');
      var Img1 = Div1.getElementsByTagName('img');
      function getstyle(obj,attr){
        return obj.currentstyle ? obj.currentstyle[attr] : getComputedStyle(obj)[attr];
      }
      function move(obj,attr,dir,target,fn){
        parseFloat(getstyle(obj,attr)) < target ? dir : -dir;
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
          var speed = parseFloat(getstyle(obj,attr)) + dir;
          if(speed >= target && dir > 0 || speed < target && dir < 0){
            speed = target;
          }
          obj.style[attr] = speed + 'px';
          if(speed == target){
            clearInterval(obj.timer);
            fn && fn();
          }
        },50)
      }
      function Two(n){
        return n < 10 ? '0' + n : '' + n;
      }
      function time(){
        var myTime = new Date();
        var Hours = myTime.getHours();
        var Min = myTime.getMinutes();
        var Sec = myTime.getSeconds();
        var str =  Two(Hours) +  Two(Min) + Two(Sec);
        var num =  parseInt(str.charAt(5)) + 1;
        var num1 =  parseInt(str.charAt(4));
        var num2 =  parseInt(str.charAt(3));
        var num3 =  parseInt(str.charAt(2));
        var num4 =  parseInt(str.charAt(1));
        var num5 =  parseInt(str.charAt(0));
        if(num  == 10){ 
          num = 0;
          num1++;
          if(num1 == 6){
            num1 = 0;
          }
        }
        if(num == 0 && num1 == 0){
          num2++;
          if(num2 == 10){
            num2 = 0
          }
        }
        if(num == 0 && num1 == 0 && num2 == 0){
          num3++;
          if(num3 == 6){
            num3 = 0
          }
        }
        if(num == 0 && num1 == 0 && num2 == 0 && num3 == 0){
          num4++;
          if(num4 == 10 || num5 == 2 && num4 == 4){
            num4 = 0
          }
        }
        if(num == 0 && num1 == 0 && num2 == 0 && num3 == 0 && num4 == 0){
          num5++;
          if(num5 == 3){
            num5 = 0
          }
        }
        Img0[0].src = 'image/' + str.charAt(0) + '.JPG';
        Img0[1].src = 'image/' + str.charAt(1) + '.JPG';
        Img0[3].src = 'image/' + str.charAt(2) + '.JPG';
        Img0[4].src = 'image/' + str.charAt(3) + '.JPG';
        Img0[6].src = 'image/' + str.charAt(4) + '.JPG';
        Img0[7].src = 'image/' + str.charAt(5) + '.JPG';
        Img1[0].src = 'image/' + num5 + '.JPG';
        Img1[1].src = 'image/' + num4 + '.JPG';
        Img1[3].src = 'image/' + num3 + '.JPG';
        Img1[4].src = 'image/' + num2 + '.JPG';
        Img1[6].src = 'image/' + num1 + '.JPG';
        Img1[7].src = 'image/' + num + '.JPG';
        for (var i = 0; i < Img0.length; i++) {
          Img0[i].style.left = 125 * i + 'px';
          Img0[i].style.top = '0px';
        };
        for (var i = 0; i < Img1.length; i++) {
          Img1[i].style.left = 125 * i + 'px';
          Img1[i].style.top = '0px';
        };
        move(Img0[7],'top',-10,-170)
        move(Img1[7],'top',-10,-170)
        if(num == 0){
          move(Img0[6],'top',-10,-170)
          move(Img1[6],'top',-10,-170)
        }
        if(num == 0 && num1 == 0){
          move(Img0[4],'top',-10,-170)
          move(Img1[4],'top',-10,-170)
        }
        if(num == 0 && num1 == 0 && num2 == 0){
          move(Img0[3],'top',-10,-170)
          move(Img1[3],'top',-10,-170)
        }
        if(num == 0 && num1 == 0 && num2 == 0 && num3 == 0){
          move(Img0[1],'top',-10,-170)
          move(Img1[1],'top',-10,-170)
        }
        if(num == 0 && num1 == 0 && num2 == 0 && num3 == 0 && num4 == 0){
          move(Img0[0],'top',-10,-170)
          move(Img1[0],'top',-10,-170)
        }
      }
      time();
      setInterval(time,1000);
    }
  </script>
</head>
<body>
  <div id="box">
    <div>
      <img src="">
      <img src="">
      <img src="image/colon.JPG">
      <img src="">
      <img src="">
      <img src="image/colon.JPG">
      <img src="">
      <img src="">
    </div>
    <div>
      <img src="">
      <img src="">
      <img src="image/colon.JPG">
      <img src="">
      <img src="">
      <img src="image/colon.JPG">
      <img src="">
      <img src="">
    </div>
  </div>
  
</body>
</html>
</body>
</html>